<template>
  <div class="post">
    <!-- 推荐攻略 -->
    <div class="recommend_strategy">
      <h2>推荐攻略</h2>
      <router-link to="/post/create">
        <div class="btn">
          <i class="el-icon-edit"></i>写游记
        </div>
      </router-link>
    </div>
    <!-- 文章列表 -->
    <div class="post_list" v-for="item in post" :key="item.id">
      <!-- 封面图大于三张 -->
      <div class="post_list_item" v-if="item.images.length >= 3">
        <div class="post_title" @click="toDetails(item.id)">{{item.title}}</div>
        <div class="post_content" @click="toDetails(item.id)">{{item.summary}}</div>
        <div class="post_img">
          <img :src="item.images[0]" alt @click="toDetails(item.id)" />
          <img :src="item.images[1]" alt @click="toDetails(item.id)" />
          <img :src="item.images[2]" alt @click="toDetails(item.id)" />
        </div>
        <div class="post_writer">
          <div class="writer_location">
            <span class="el-icon-location-outline"></span>
            <span class="city">{{item.cityName}}</span>
            <span class="name">by</span>
            <img :src="$axios.defaults.baseURL + item.account.defaultAvatar" alt />
            <span class="nickname">{{item.account.nickname}}</span>
            <span class="el-icon-view"></span>
            <span class="reading">{{item.watch}}</span>
          </div>
          <div class="like">
            <span class="num">{{item.like == null ? '0' : item.like}}</span>赞
          </div>
        </div>
      </div>
      <!-- 封面图小于2张 -->
      <div class="post_list_item2" v-if="item.images.length < 3 && item.images.length > 0">
        <div class="post_img">
          <img :src="item.images[0]" alt @click="toDetails(item.id)" />
        </div>
        <div class="content">
          <div class="post_title" @click="toDetails(item.id)">{{item.title}}</div>
          <div class="post_content" @click="toDetails(item.id)">{{item.summary}}</div>
          <div class="post_writer">
            <div class="writer_location">
              <span class="el-icon-location-outline"></span>
              <span class="city">{{item.cityName}}</span>
              <span class="name">by</span>
              <img :src="$axios.defaults.baseURL + item.account.defaultAvatar" alt />
              <span class="nickname">{{item.account.nickname}}</span>
              <span class="el-icon-view"></span>
              <span class="reading">{{item.watch}}</span>
            </div>
            <div class="like">
              <span class="num">{{item.like == null ? '0' : item.like}}</span>赞
            </div>
          </div>
        </div>
      </div>
      <!-- 没有封面图 -->
      <div class="post_list_item3" v-if="item.images.length < 1">
        <div class="content">
          <div class="post_title" @click="toDetails(item.id)">{{item.title}}</div>
          <div class="post_content" @click="toDetails(item.id)">{{item.summary}}</div>
          <div class="post_writer">
            <div class="writer_location">
              <span class="el-icon-location-outline"></span>
              <span class="city">{{item.cityName}}</span>
              <span class="name">by</span>
              <img :src="$axios.defaults.baseURL + item.account.defaultAvatar" alt />
              <span class="nickname">{{item.account.nickname}}</span>
              <span class="el-icon-view"></span>
              <span class="reading">{{item.watch}}</span>
            </div>
            <div class="like">
              <span class="num">{{item.like == null ? '0' : item.like}}</span>赞
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["post"],
  methods: {
    toDetails(id) {
      console.log(id);
      this.$router.push({
        path: "/post/details?id=" + id,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.post {
  margin-bottom: 20px;
  // 推荐攻略
  .recommend_strategy {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 8px;
    h2 {
      font-weight: 400;
      font-size: 18px;
      color: orange;
      position: relative;
      &::after {
        display: block;
        content: "";
        width: 72px;
        height: 2px;
        background: orange;
        position: absolute;
        bottom: -16px;
        left: 0;
      }
    }
    .btn {
      width: 105px;
      height: 40px;
      background-color: #409eff;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      .el-icon-edit {
        margin-right: 5px;
      }
    }
  }
  // 文章列表
  .post_list {
    //   封面大于三张图片的样式
    .post_list_item {
      border-bottom: 1px solid #eeeeee;
      padding: 20px 0;
      //   文章标题
      .post_title {
        font-size: 18px;
        color: #000;
        margin-bottom: 20px;
        cursor: pointer;
        &:hover {
          color: #ffad00;
        }
      }
      //   文章内容
      .post_content {
        font-size: 14px;
        color: #707070;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        cursor: pointer;
      }
      //   文章图片
      .post_img {
        display: flex;
        justify-content: space-between;
        margin: 15px 0;
        img {
          width: 220px;
          height: 150px;
          object-fit: cover;
          cursor: pointer;
        }
      }
      .post_writer {
        height: 26px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .writer_location {
          font-size: 12px;
          color: #999999;
          .name {
            margin: 0 5px;
          }
          .nickname {
            color: #ffa500;
          }
          img {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            vertical-align: middle;
            object-fit: cover;
          }
          .el-icon-view {
            margin-left: 5px;
          }
        }
        // 发布者
        .like {
          font-size: 16px;
          color: #ffa500;
          .num {
            margin-right: 5px;
          }
        }
      }
    }
    // 封面一张图片的样式
    .post_list_item2 {
      display: flex;
      padding: 20px 0;
      border-bottom: 1px solid #f4f4f4;
      .post_img {
        width: 220px;
        height: 150px;
        border: 1px solid #eee;
        margin-right: 10px;
        img {
          width: 220px;
          height: 150px;
          object-fit: cover;
          cursor: pointer;
        }
      }
      .content {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        //   文章标题
        .post_title {
          font-size: 18px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          cursor: pointer;
          &:hover {
            color: #ffad00;
          }
        }
        //   文章内容
        .post_content {
          font-size: 14px;
          color: #707070;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          cursor: pointer;
        }
        .post_writer {
          height: 26px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .writer_location {
            font-size: 12px;
            color: #999999;
            .name {
              margin: 0 5px;
            }
            .nickname {
              color: #ffa500;
            }
            img {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              vertical-align: middle;
              object-fit: cover;
            }
            .el-icon-view {
              margin-left: 5px;
            }
          }
          // 发布者
          .like {
            font-size: 16px;
            color: #ffa500;
            .num {
              margin-right: 5px;
            }
          }
        }
      }
    }
    // 没有封面图样式开始
    .post_list_item3 {
      padding: 20px 0;
      border-bottom: 1px solid #f4f4f4;
      .content {
        //   文章标题
        .post_title {
          font-size: 18px;
          color: #000;
          margin-bottom: 20px;
          cursor: pointer;
          &:hover {
            color: #ffad00;
          }
        }
        //   文章内容
        .post_content {
          height: 63px;
          font-size: 14px;
          margin-bottom: 15px;
          color: #707070;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          cursor: pointer;
        }
        // 作者
        .post_writer {
          height: 26px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .writer_location {
            font-size: 12px;
            color: #999999;
            .name {
              margin: 0 5px;
            }
            .nickname {
              color: #ffa500;
            }
            img {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              vertical-align: middle;
              object-fit: cover;
            }
            .el-icon-view {
              margin-left: 5px;
            }
          }
          // 发布者
          .like {
            font-size: 16px;
            color: #ffa500;
            .num {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
